<template>
	<view class="tab-page friend">

		<view style="width: 100%;">
			<view class="search">
				<up-search placeholder="搜索" v-model="searchText" :clearabled="true" :showAction="false"
					bg-color="#ffffff" search-icon-color="#474a52" placeholder-color="#82868d" height="40"></up-search>
			</view>
		</view>

		<view class="friend-tip" v-if="friends.length == 0">
			<up-empty mode="data" text="暂无数据">
			</up-empty>
		</view>
		<view class="friend-items" v-else>
			<up-index-list :index-list="friendIdx">
				<template v-for="(friends, i) in friendGroups">
					<up-index-item>
						<up-index-anchor :text="friendIdx[i] == '*' ? '在线' : friendIdx[i]"
							bgColor="#ffffff"></up-index-anchor>
						<view v-for="(friend, idx) in friends" :key="idx">
							<friend-item :friend="friend" :source-type="0"></friend-item>
						</view>
					</up-index-item>
				</template>
			</up-index-list>
		</view>
	</view>
</template>

<script>
	import {
		pinyin
	} from 'pinyin-pro';

	export default {
		props: {
			companyId: {
				type: Number,
				default: null
			}
		},
		data() {
			return {
				searchText: '',
				workFirend: [],
			}
		},
		methods: {
			onAddNewFriends() {
				uni.navigateTo({
					url: "/pageSubOne/friend/friend-add"
				})
			},
			firstLetter(strText) {

				// 使用pinyin-pro库将中文转换为拼音11
				let pinyinOptions = {
					toneType: 'none', // 无声调
					type: 'normal' // 普通拼音
				};
				let pyText = pinyin(strText, pinyinOptions);
				return pyText[0];
			},
			isEnglish(character) {
				return /^[A-Za-z]+$/.test(character);
			},
			getUser(id) {
				this.$http({
					url: "/work/friend/list?companyId=" + id,
					method: "GET"
				}).then((data) => {

					this.workFirend = data
				})
			}
		},
		computed: {
			friends() {
				//const friends=this.friendStore.friends.filter(item=>item.friendType==0)
				const friends = this.workFirend;

				return friends;
			},
			friendGroupMap() {
				// 按首字母分组
				let groupMap = new Map();
				this.friends.forEach((f) => {
					if (this.searchText && !f.friendNickName.includes(this.searchText)) {
						return;
					}
					let letter = this.firstLetter(f.friendNickName).toUpperCase();
					// 非英文一律为#组
					if (!this.isEnglish(letter)) {
						letter = "#"
					}
					if (f.online) {
						letter = '*'
					}
					if (groupMap.has(letter)) {
						groupMap.get(letter).push(f);
					} else {
						groupMap.set(letter, [f]);
					}
				})
				// 排序
				let arrayObj = Array.from(groupMap);
				arrayObj.sort((a, b) => {
					// #组在最后面
					if (a[0] == '#' || b[0] == '#') {
						return b[0].localeCompare(a[0])
					}
					return a[0].localeCompare(b[0])
				})
				groupMap = new Map(arrayObj.map(i => [i[0], i[1]]));
				return groupMap;
			},
			friendIdx() {
				return Array.from(this.friendGroupMap.keys());
			},

			friendGroups() {
				return Array.from(this.friendGroupMap.values());
			}
		},

		created() {
			if (this.companyId) {
				this.getUser(this.companyId)
			}
		},


	}
</script>

<style lang="scss" scoped>
	.friend {
		position: relative;
		display: flex;
		flex-direction: column;
		overflow-y: auto;

		.title {
			font-size: 40rpx;
			font-weight: bold;
			padding: 0 3px;
		}

		.search {
			padding-bottom: 20rpx;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			padding: 0 32rpx;

			:deep(.u-search__content) {
				border-radius: 30px !important;
				height: 72rpx;
			}

			:deep(.u-search) {
				border-radius: 30px !important;
				border: 1rpx solid $gray-200;
			}
		}


		.friend-txl {
			width: 100%;

			.txl {
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.txl-left {
					display: flex;
					align-items: center;

					text {
						margin-left: 40rpx;
					}

					.txl-img {
						width: 60rpx;
						height: 60rpx;
					}
				}
			}

			.txl3 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 20rpx 20rpx 10rpx;

				.txl-left {
					display: flex;
					align-items: center;

					text {
						margin-left: 30rpx;
					}

					.txl-img3 {
						width: 80rpx;
						height: 80rpx;
					}
				}
			}
		}

		.friend-items {
			flex: 1;
			padding: 0;
			border: #dddddd solid 1px;
			// overflow: hidden;
			// position: relative;

			.scroll-bar {
				height: 100%;
			}
		}
	}
</style>